<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑 -->
      <SubBread/>
      <!-- 筛选区域 -->
      <SubFilter/>

      <!-- 筛选结果区域 -->
      <div class="goods-list">
        <SubSort/>
        <SubList/>
      </div>
    </div>
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category'
import { onMounted, provide, ref } from 'vue'
import { useRoute } from 'vue-router'
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import SubList from './components/sub-list.vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    const subCategory = ref({})
    // 向下注入数据
    provide('subCategoryData', subCategory)
    // 获取动态参数
    const route = useRoute()

    // 筛选参数
    const filterParams = ref({
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    })
    // 向下注入数据
    provide('filterParams', filterParams)
    const getSubCategory = async (id) => {
      const { result } = await findSubCategoryFilter(id)
      console.log(result)
      // 品牌
      result.brands.forEach(item => {
        item.selected = false
      })
      result.brands.unshift({
        name: '全部',
        id: null,
        selected: true
      })
      // 属性
      result.saleProperties.forEach(item => {
        item.properties.forEach(i => {
          i.selected = false
        })
        item.properties.unshift({
          name: '全部',
          id: null,
          selected: true
        })
      })
      subCategory.value = result
    }

    onMounted(() => {
      getSubCategory(route.params.id)
    })
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
